<template>
	<div id="login">
		<el-form class="form" :rules="rules" ref="ruleForm" :model="user">
			<el-form-item label="用户名" prop="id"><el-input autofocus v-model="user.id" placeholder="请输入账号" clearable></el-input></el-form-item>
			<el-form-item label="密码" prop="pwd"><el-input v-model="user.pwd" type="password" clearable placeholder="请输入密码"></el-input></el-form-item>
			<el-form-item label="验证码" prop="yzm">
				<div class="yzm-row">
					<el-input v-model="user.yzm" @keyup.enter.native="onLogin" clearable placeholder="请输入验证码"></el-input>
					<img ref="yzm" @click="refreshYzm" />
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onLogin">登录</el-button>
				<el-button @click="reSet">重置</el-button>
				<el-button v-if="$store.state.admin != null" @click="goIndex" type="text">已登录，返回主页</el-button>
				<el-button @click="setVisitor" type="text">访客账户</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { get, post } from '@/puigins/request.js';
export default {
	data() {
		let validateId = (rule, value, callback) => {
			if (value.length === 0) return callback(new Error('请输入账号'));
			callback();
		};
		let validatePwd = (rule, value, callback) => {
			if (value.length === 0) return callback(new Error('请输入密码'));
			if (value.length < 6 || value.length > 32) return callback(new Error('密码长度6~32'));
			callback();
		};
		let validateYzm = (rule, value, callback) => {
			if (value.length === 0) return callback(new Error('请输入验证码'));
			if (value.length != 4) return callback(new Error('验证码长度应为4'));
			callback();
		};
		return {
			user: {
				id: '',
				pwd: '',
				yzm: ''
			},
			t1: 0,
			rules: {
				id: [
					{
						validator: validateId,
						trigger: 'blur'
					}
				],
				pwd: [
					{
						validator: validatePwd,
						trigger: 'blur'
					}
				],
				yzm: [
					{
						validator: validateYzm,
						trigger: 'blur'
					}
				]
			},
			flag: true
		};
	},
	mounted() {
		this.refreshYzm();
	},
	methods: {
		refreshYzm() {
			let t2 = new Date().getTime();
			if (t2 - this.t1 > 1000) {
				this.t1 = t2;
			} else {
				this.$message.closeAll();
				this.$message.warning('操作太快了');
				return;
			}
			this.$refs['yzm'].src = this.$g.BASE_URL + 'util/yzm?i=' + t2;
			console.log('刷新验证码');
		},
		onLogin() {
			// this.$router.push("/")
			// return
			this.flag = false;
			this.$refs['ruleForm'].validate(valid => {
				if (valid) {
					post('/manage/admin/login', {
						username: this.user.id,
						password: this.user.pwd,
						yzm: this.user.yzm
					}).then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: '登录成功',
								duration: 1000
							});
							this.$store.commit('set_admin', res.data);
							this.$router.push('/');
						} else {
							this.$message.error(res.data);
						}
					});
				}
			});
		},
		reSet() {
			this.$refs['ruleForm'].resetFields();
		},
		goIndex() {
			this.$router.push('/');
		},
		setVisitor() {
			this.user.id = 'visitor';
			this.user.pwd = 'visitor';
			this.$message.closeAll();
			this.$message.success('已填入访客账户');
		}
	},
	computed: {
		admin() {
			return this.$store.state.admin;
		}
	},
	watch: {
		admin() {
			if (this.flag) {
				if (this.admin != null) {
					if (this.$route.path != '/') this.$router.push('/');
				}
			}
		}
	}
};
</script>

<style lang="scss">
#login {
	// position: fixed;
	// width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 88;
	background-color: #2d3a4b;
	padding-top: 150px;

	.form {
		width: 400px;
		margin: 0 auto;

		.yzm-row {
			width: 100%;
			display: flex;

			img {
				width: 120px;
				height: 40px;
				margin-left: 10px;
			}
		}
	}
}
</style>
